<template>
	<div class="ceilingLamp" id="roll">
		<img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" />
		<Affix :offset="100">
			<div style="text-align: center">
				<div>我一直都在</div>
				<img
					style="width: 100px; height: 100px; border-radius: 100%"
					src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
				/>
			</div>
		</Affix>
		<Affix ref="elAffix" :offset="0" affixcontainer="affix-container">
			<Menu></Menu>
		</Affix>
		<Affix ref="elAffix1" @change="change" @scroll="scroll" :offset="0" affixcontainer="affix-container1">
			<Menu1></Menu1>
		</Affix>
		<div style="width: 100%; height: 1000px"></div>
	</div>
</template>

<script setup lang="ts" name="CeilingLamp">
import Affix from './components/ElAffix.vue'
import Menu from './components/ElMenu.vue'
import Menu1 from './components/ElMenu1.vue'
//fixed 状态改变时触发的事件
const change = (e: boolean) => {
	console.log('状态发生变化了' + e)
}
//滚动监听
const scroll = (e: any) => {
	console.log('滚动监听' + e)
}
</script>
<style lang="scss">
// .el-main {
// 	overflow: visible !important;
// }
.ceilingLamp {
	.affix-container {
		height: 400px;
		background: var(--el-color-primary-light-9);
	}
	.affix-container1 {
		height: 500px;
		background: rgb(216 194 194);
	}
	img {
		width: 100%;
		height: 200px;
	}
}
</style>
